<template>
  <div class="page-container" style="min-height: 100vh;">
    <router-link to="/mine/index" class="back-link">--->>返回</router-link>
    <!-- 头像处理 -->
    <div class="app-userinfo-div">
      <div class="app-avatar-div">
        <el-avatar
            style="width: 150px;height: 150px;"
            :src="form.avatarUrl?form.avatarUrl:'http://121.41.164.80:9090/api/v1/download-shared-object/aHR0cDovLzEyNy4wLjAuMToxOTAwMC9jZHovY2hhcmdlVXNlciUzQWF2YXRhciUzQWltZy0wNThlYTZlMy1mYTcxLTQyMjUtYmVhMC1kYjMxYjUxMmY3NTE5NjdhYTYyNjFhN2Y0NzI0YmNhYTJkNjMxNTY2NzhmMi5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1MTUVSMDdEQzNCQk4wNEozRlgxWSUyRjIwMjQxMjIzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTIyM1QxMTQ0MTdaJlgtQW16LUV4cGlyZXM9NDMyMDAmWC1BbXotU2VjdXJpdHktVG9rZW49ZXlKaGJHY2lPaUpJVXpVeE1pSXNJblI1Y0NJNklrcFhWQ0o5LmV5SmhZMk5sYzNOTFpYa2lPaUpNVFVWU01EZEVRek5DUWs0d05Fb3pSbGd4V1NJc0ltVjRjQ0k2TVRjek5EazRNekl5T0N3aWNHRnlaVzUwSWpvaWJXbHVhVzloWkcxcGJpSjkuOWM0eGNOUUFHSTZlcllYaUItS1JWdXZVN1hSTm5UVExOMGx4azY2V3BXc1YzUF9yUUNDZUZ3bWEtZm1MRHhiUTNmMmI1bU1yeGNoWl91V1hHVTBsQ3cmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JnZlcnNpb25JZD1udWxsJlgtQW16LVNpZ25hdHVyZT00MjFjMzhjNTcxZThhMzQyODk1N2Y3ODQ5ZDZjNTUxZGQyMDA3NTIwNjhlODRhNWQyZGM0NTVmN2U5OTUyZThm'"
            class="blur-avatar"
        />
        <div style="position: absolute;top: 130px;left: 110px;">
          <van-uploader :after-read="onRead">
            <van-icon name="photograph" class="custom-icon"/>
          </van-uploader>
        </div>
      </div>
    </div>
    <div class="div-userinfo-show">
      <div class="title">
        <p>编辑信息</p>
      </div>
      <div class="input-group">
        <label>昵称：</label>
        <el-input type="text" v-model="form.nickName" class="underline-input"/>
      </div>
      <div class="input-group">
        <label>手机号：</label>
        <el-input type="text" v-model="form.phone" class="underline-input"/>
      </div>
      <div class="input-group">
        <label>电子邮箱：</label>
        <el-input type="text" v-model="form.email" class="underline-input"/>
      </div>
      <div class="button-group">
        <van-button round type="danger" @click="updateUserInfo()">保存信息</van-button>
        <van-button round type="danger" @click="userLogout()">退出登录</van-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {GetUserInfo, updateAvatarImgJs, updateUserInfoJs} from "@/api/user";
import {ElMessage} from "element-plus";
import router from "@/router";

const form = ref({
  nickName: '',
  phone: '',
  email: '',
  avatarUrl: '',
})

// 处理文件的方法

function onRead(file) {
  const formData = new FormData();
  formData.append('file', file.file);
  updateAvatarImgJs(formData).then(res=>{
    if(res.data.code == 200000){
      console.log(res.data.errorMessage)
      form.value.avatarUrl =res.data.errorMessage
      ElMessage.success("上传成功")
    }else {
      ElMessage.error("上传失败")
    }
  })
}


// 获取当前登录用户
function getUserInfo() {
  GetUserInfo().then(res => {
    if (res.data.code == 200000) {
      form.value.nickName = res.data.data.nickName;
      console.log('更新后的昵称：', form.value.nickName);
      form.value.phone = res.data.data.phone;
      console.log('更新后的手机号：', form.value.phone);
      form.value.email = res.data.data.email;
      console.log('更新后的邮箱：', form.value.email);
    }
  });
}

onMounted(() => {
  getUserInfo();
});

// 修改用户基本信息x
function updateUserInfo() {
  console.log(form.value)
  updateUserInfoJs(form.value).then(res => {
    if (res.data.code == 200000) {
      ElMessage.success(res.data.errorMessage)
      // 登录成功之后返回登录页面，清除token
      router.push("/user/login")
      localStorage.removeItem("token")
    } else {
      ElMessage
          .error(res.data.errorMessage)
    }
  })
}

// 退出登录
function userLogout(){

      router.push("/user/login")
      localStorage.removeItem("token")

}



</script>

<style>
.underline-input {
  border: none;
  border-bottom: 1px solid #000; /* 下边框的样式，可以调整颜色和粗细 */
  outline: none; /* 去除输入框聚焦时的默认边框 */
  padding: 5px;
  width: 350px; /* 可以根据需要调整输入框宽度 */
}

.el-input__wrapper {
  background: none;
  box-shadow: none;
}

.el-input {
  --el-input-focus-border-color: none;
}

.div-userinfo-show {
  height: 500px;
  position: relative;
  bottom: -30px;
}

.app-userinfo-div {
  position: relative;
  top: 40px;
  left: 130px;
}

.custom-icon {
  width: 40px;
  height: 40px;
}
.blur-avatar {
  filter: blur(1px) opacity(0.8);
}

</style>
